<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 
			表单
				1. 文本框 
					.form-control 表单元素的样式
					表单控件的大小	.input-lg 	.input-sm
				2. 下拉框
					.form-control 表单元素的样式
					multiple="multiple" 设置下拉框多选
				3. 文本域
					.form-control 表单元素的样式
				4. 复选框
					垂直显示   .checkbox
					水平显示	  .checbox-inline
				5. 单选框
					垂直显示   .radio
					水平显示	  .radio-inline
				6. 按钮
					1. 使用按钮
						基础样式： .btn
						附加样式：btn-primary  btn-info  btn-success  btn-warning  btn-danger  btn-link  btn-default
					2. 多标签使用
						其他标签可以通过添加按钮样式设置成按钮效果（a标签、span标签等）
					3. 按钮大小
						大按钮	.btn-lg
						正常按钮	.btn-sm
						小按钮	.btn-xs
					4. 按钮禁用
						1.通过disabled属性（真正的禁用元素）
						2.通过disabled样式（样式上禁用）
		 -->
		 <input type="text" /> <br>
		 <select>
			 <option>请选择城市</option>
			 <option>上海</option>
			 <option>北京</option>
		 </select> <br>
		 <textarea></textarea><br>
		 <input type="checkbox" name="hobby" /> 唱歌
		 <input type="checkbox" name="hobby" /> 跳舞 <br>
		 <input type="radio" name="sex" /> 男
		 <input type="radio" name="sex" /> 女<br>
		 <button>按钮</button> <input type="button" value="按钮" />
		 
		 <hr><br>
		 
		 
		  <!-- 文本框-->
		 <div class="row">
			 <div class="col-md-3">				
				 <input type="text" class="form-control" /> <br>
				 <input type="text" class="form-control input-lg" /> <br>
				 <input type="text" class="form-control input-sm" /> <br>
			 </div>
		 </div>
		 <!--  下拉框 -->
		 <div class="row">
			 <div class="col-md-3">
				 <select class="form-control">
					 <option>请选择城市</option>
					 <option>上海</option>
					 <option>北京</option>
				 </select> <br>
				 <select class="form-control" multiple="multiple">
					 <option>请选择城市</option>
					 <option>上海</option>
					 <option>北京</option>
				 </select> <br>
			 </div>
		 </div>
		 <!-- 文本域-->
		 <div class="row">
			 <div class="col-md-3">				
				 <textarea class="form-control">
				 	
				 </textarea>
			 </div>
		 </div>
		 
		 <!-- 复选框 -->
		 <!-- 垂直显示-->
		 <div class="row">
			 <div class="col-md-3">				
				 <div class="checkbox">
					 <label><input type="checkbox" name="hobby" /> 唱歌</label>
				 </div>
				 <div class="checkbox">
				 	 <label><input type="checkbox" name="hobby" /> 跳舞</label>
				 </div>
			 </div>
		 </div>
		 <!-- 水平显示-->
		 <div class="row">
			 <div class="col-md-3">				
				 <label class="checkbox-inline">
					 <input type="checkbox" name="hobby" /> 唱歌
				 </label>
				 <label class="checkbox-inline">
				 	 <input type="checkbox" name="hobby" /> 跳舞
				 </label>
			 </div>
		 </div>
		 
		 <!-- 单选框-->
		 <!-- 垂直显示-->
		 <div class="row">
			 <div class="col-md-3">				
				 <div class="radio">
					 <label><input type="radio" name="sex" /> 男</label>
				 </div>
				 <div class="radio">
					 <label><input type="radio" name="sex" /> 女</label>
				 </div>
			 </div>
		 </div>
		 <!-- 水平显示-->
		 <div class="row">
			 <div class="col-md-3">				
				 <label class="radio-inline">
					 <input type="radio" name="sex" value="" /> 男
				 </label>
				 <label class="radio-inline">
					 <input type="radio" name="sex" /> 女
				 </label>
			 </div>
		 </div>
		 
		 <!-- 按钮 -->
		 <button class="btn">按钮</button>
		 <button class="btn btn-danger">按钮</button>
		 <button class="btn btn-success">按钮</button>
		 <button class="btn btn-warning">按钮</button>
		 <button class="btn btn-primary">按钮</button>
		 <button class="btn btn-info">按钮</button>
		 <button class="btn btn-default">按钮</button>
		 <button class="btn btn-link">按钮</button><br>
		 
		 <!-- 通过按钮样式设置其他元素为按钮效果 -->
		 <a href="#" class="btn btn-success">a标签</a>
		 <span class="btn btn-danger">span标签</span>
		 <div class="btn btn-info">div标签</div>
		 <br />
		 
		 <!-- 设置按钮的大小 -->
		<button class="btn btn-danger">按钮</button>
		<button class="btn btn-success btn-lg">按钮</button>
		<button class="btn btn-warning btn-sm">按钮</button>	
		<button class="btn btn-warning btn-xs">按钮</button>	
		<br />
		<!-- 按钮禁用 -->
		<!-- 在标签中添加disabled属性 -->
		<button class="btn btn-info" onclick="alert('Hello');" disabled="disabled">按钮</button>
		<!-- 在元素标签中添加类名"disabled"-->
		<button class="btn btn-primary disabled" onclick="alert('Hello');">按钮</button>
	</body>
</html>
